<template>
  <div class="audit-deposit">
    <a-spin :spinning="loading">
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:145px' }" :wrapper-col="{ style: 'calc(100% - 145px)' }" autocomplete="off">
        <div class="box-info">
          <div class="title">来款信息</div>

          <a-row>
            <a-col :span="12">
              <a-form-item label="经营单位" name="deptId" :rules="[{ required: true, message: '请选择经营单位!' }]">
                <a-select :disabled="type === 3" v-model:value="formState.deptId" placeholder="请选择" :filter-option="filterOption" show-search :options="companyOpts"> </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="付款方名称" name="payerName" :rules="[{ required: true, message: '请填写付款方名称!' }]">
                <a-input :disabled="type === 3" v-model:value="formState.payerName" :maxlength="40" placeholder="请输入"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="客户名称" name="customerId" :rules="[{ required: true, message: '请选择客户名称!' }]">
                <a-select :disabled="type === 3" v-model:value="formState.customerId" placeholder="请选择" :filter-option="filterOption" show-search :options="customerOpts" @change="changeCompany">
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="来款金额" name="depositPrice" :rules="[{ required: true, message: '请填写来款金额!' }]">
                <a-input-number :disabled="type === 3" v-model:value="formState.depositPrice" :min="0.01" :max="9999999.99" placeholder="请输入"></a-input-number>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="来款时间" name="proceedsTime" :rules="[{ required: true, message: '请选择来款时间!' }]">
                <a-date-picker :disabled="type === 3" v-model:value="formState.proceedsTime" show-time placeholder="请选择" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="来款备注" name="remark">
                <a-textarea :disabled="type === 3" v-model:value="formState.remark" placeholder="请输入" show-count :maxlength="300" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="来款图片" name="image" :rules="[{ required: false, message: '请上传图片!' }]">
                <CustomerUploadFile mode="/parent/" :disabled="type === 3" :canPast="true" :multiple="false" v-model:value="formState.image" valueType="1" :maxCount="5" list-type="picture-card">
                  <plus-outlined></plus-outlined>
                </CustomerUploadFile>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="box-info">
          <div class="title">收款信息</div>
          <a-row>
            <a-col :span="12">
              <a-form-item label="收款账户" name="accountId" :rules="[{ required: true, message: '请选择收款账户!' }]">
                <a-select
                  :disabled="type === 3"
                  v-model:value="formState.accountId"
                  :fieldNames="{ label: 'shortName', value: 'id' }"
                  :options="accountOpts"
                  placeholder="请选择"
                  @change="findPaymentMethod"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="流水号" name="serialNum" :rules="[{ required: true, message: '请填写流水号!' }]">
                <!-- <a-input :disabled="type === 3" v-model:value="formState.serialNum" @keyup="validateZhInputHandle($event, formState, ['serialNum'])" :maxlength="25" placeholder="请输入"></a-input> -->
                <a-input :disabled="type === 3" v-model:value="formState.serialNum" placeholder="请输入" @keyup="validateZhInputHandle($event, formState, ['serialNum'])"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="收款方式" name="paymentMethod" :rules="[{ required: false, message: '请输入收款方式', trigger: 'change' }]">
                <a-select ref="select" v-model:value="formState.paymentMethod">
                  <!-- <a-select-option value="转账">转账</a-select-option>
                  <a-select-option value="移动支付">移动支付</a-select-option>
                  <a-select-option value="易收宝">易收宝</a-select-option>
                  <a-select-option value="现金">现金</a-select-option> -->
                  <a-select-option v-for="item in dataDict['PAYMENT_TERM']" :key="item.consValue" :value="item.name" :label="item.name">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="收款备注" name="receivedRemark">
                <a-textarea :disabled="type === 3" v-model:value="formState.receivedRemark" placeholder="请输入" show-count :maxlength="500" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-spin>
    <div class="operation-wrapper">
      <a-button v-debounce :loading="btnLoading" @click="saveSatusHandle" type="primary">保存</a-button>
      <a-button v-debounce :loading="btnLoading" @click="submitHandle(true)" type="primary">通过并审核下一条</a-button>
      <a-button v-debounce :loading="btnLoading" @click="submitHandle(false)" type="primary">审核通过</a-button>
      <a-button :loading="btnLoading" @click="resetHandle">取消</a-button>
    </div>
  </div>

  <!-- 
      <a-form-item label="流水号" name="serialNum" :rules="[{ required: true, message: '请填写流水号!' }]">
        <a-input :disabled="type === 3" v-model:value="formState.serialNum" @keyup="validateZhInputHandle($event, formState, ['serialNum'])" :maxlength="25" placeholder="请输入"></a-input>
      </a-form-item>


      <a-form-item label="收款账户" name="accountId" :rules="[{ required: false, message: '请选择收款账户!' }]">
        <a-select :disabled="type === 3" v-model:value="formState.accountId" :fieldNames="{ label: 'name', value: 'id' }" :options="accountOpts" placeholder="请选择" />
      </a-form-item> -->
</template>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { PlusOutlined } from "@ant-design/icons-vue";
import CommonHook from "@/hook/commonHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WaterVerification.ListRows;
    type: number; // 1 新增  2 编辑  3 查看
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formDataRef, formState, loading, customerOpts, accountOpts, btnLoading, getAllCustomer, companyOpts } = InitHook();
const { dataDict } = CommonHook();
const { resetFields, resetHandle, validateZhInputHandle, submitHandle, filterOption, saveSatusHandle, changeCompany, init, findPaymentMethod } = OperationHook({
  btnLoading,
  formDataRef,
  formState,
  passData,
  emit,
  loading,
  type,
  companyOpts,
  accountOpts,
  getAllCustomer
});
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
    } else {
      init(passData.value.id);
    }
  }
);
init(passData.value.id);
</script>
<style lang="stylus" scoped>

.audit-deposit {
  padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 16px;
        padding: 12px;
    }
    .box-info{
        margin-top: 12px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .title{
            display: flex;
            flex-direction:column;
            .title-Inner-div{
              display:flex;
              justify-content:space-between;
              align-items:center
            }
        }
        .table-content{
          padding: 0 12px 12px 12px;
        }
    }

    .operation-wrapper{
        position: absolute;
        background-color: #fff;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        box-shadow: 1px 1px 5px #ccc;
        z-index: 99;
        :deep(.ant-btn-primary){
          margin-right: 12px;
        }
      }


}


:deep(.ant-input-number),:deep(.ant-picker){
    width: 100%;
}
</style>
